{% extends webapp_config['LAYOUT'] %}

{% block meta_title %}Blog | Snapcraft{% endblock %}
{% block meta_copydoc %}https://docs.google.com/document/d/1YWhw_DlbXrq9CBUtMgjzlzZds0_m8xr-MZlXpXkMvIQ/edit{% endblock %}

{% block content %}

<section id="main-content" class="p-strip--image is-shallow snapcraft-banner-background">
  <div class="row">
    <div class="col-10">
      <h2 class="u-no-margin--bottom">Blog</h2>
    </div>
  </div>
</section>

<section class="p-strip is-shallow">
  {% if newsletter_subscribed %}
    <div class="row">
      <div class="p-notification--positive">
        <div class="p-notification__response"><b>Success:</b> Thanks for subscribing!</div>
      </div>
    </div>
  {% endif %}
  {% if categories %}
    <div class="row u-align--right">
      <form class="p-form p-form--inline" data-js="filterForm" method="get">
        <div class="p-form__group">
          <label class="p-form__label" for="filter" aria-label="Filter posts by category">Filter:</label>
          <select id="filter" name="filter" class="p-form__control" name="filter">
            <option value="all">All</option>
            {% for category in categories %}
              <option value="{{ category.name.lower() }}"{% if filter == category.name.lower() %} selected="selected"{% endif %}>
                {{ category.name }}
              </option>
            {% endfor %}
          </select>
        </div>
      </form>
    </div>
  {% endif %}

  <div class="row u-clearfix">
    {% for article in articles %}
      {% if current_page == 1 and loop.index == 3 %}
        <div class="col-4 col-medium-3">
          {% include 'partials/_newsletter-signup.html' %}
        </div>
      {% else %}
        {% include 'partials/blog-card.html' %}
      {% endif %}
    {% endfor %}
  </div>

  <div class="u-fixed-width">
    <ol class="p-pagination u-align--center">

      {% if current_page > 1 %}
        <li class="p-pagination__item">
          <a class="p-pagination__link--previous" href="/blog?page={{ current_page - 1 }}" title="Previous page">
            <i class="p-icon--contextual-menu">Previous page</i>
          </a>
        </li>
      {% else %}
        <li class="p-pagination__item">
          <span class="p-pagination__link--previous is-disabled"><i class="p-icon--contextual-menu">Previous page</i></span>
        </li>
      {% endif %}

      {# always show 5 pages in pagination #}
      {% if current_page > 4 and current_page == total_pages %}
        <li class="p-pagination__item">
          <a class="p-pagination__link" href="/blog?page={{ current_page - 4 }}">{{ current_page - 4 }}</a>
        </li>
      {% endif %}

      {% if current_page > 3 and current_page >= total_pages - 1 %}
        <li class="p-pagination__item">
          <a class="p-pagination__link" href="/blog?page={{ current_page - 3 }}">{{ current_page - 3 }}</a>
        </li>
      {% endif %}

      {% if current_page > 2 %}
        <li class="p-pagination__item">
          <a class="p-pagination__link" href="/blog?page={{ current_page - 2 }}">{{ current_page - 2 }}</a>
        </li>
      {% endif %}

      {% if current_page > 1 %}
        <li class="p-pagination__item">
          <a class="p-pagination__link" href="/blog?page={{ current_page - 1 }}">{{ current_page - 1 }}</a>
        </li>
      {% endif %}

      <!-- current page -->
      <li class="p-pagination__item">
        <a class="p-pagination__link is-active" href="/blog?page={{ current_page }}">{{ current_page }}</a>
      </li>

      {% if current_page < total_pages %}
        <li class="p-pagination__item">
          <a class="p-pagination__link" href="/blog?page={{ current_page + 1 }}">{{ current_page + 1 }}</a>
        </li>
      {% endif %}

      {% if current_page < total_pages - 1 %}
        <li class="p-pagination__item">
          <a class="p-pagination__link" href="/blog?page={{ current_page + 2 }}">{{ current_page + 2 }}</a>
        </li>
      {% endif %}

      {% if current_page < total_pages - 2 and current_page <= 2 %}
        <li class="p-pagination__item">
          <a class="p-pagination__link" href="/blog?page={{ current_page + 3 }}">{{ current_page + 3 }}</a>
        </li>
      {% endif %}

      {% if current_page < total_pages - 3 and current_page == 1 %}
        <li class="p-pagination__item">
          <a class="p-pagination__link" href="/blog?page={{ current_page + 4 }}">{{ current_page + 4 }}</a>
        </li>
      {% endif %}

      {% if current_page != total_pages %}
        <li class="p-pagination__item">
          <a class="p-pagination__link--next" href="/blog?page={{ current_page + 1 }}" title="Next page">
            <i class="p-icon--contextual-menu">Next page</i>
          </a>
        </li>
      {% else %}
        <li class="p-pagination__item">
          <span class="p-pagination__link--next is-disabled"><i class="p-icon--contextual-menu">Next page</i></span>
        </li>
      {% endif %}
    </ol>
  </div>
</section>

{% endblock %}

{% block scripts_includes %}
  <script src="{{ static_url('js/dist/public.js') }}" defer></script>
{% endblock %}

{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function () {
        {% if categories %}
          var filter = document.getElementById('filter');
          var filterForm = document.querySelector('[data-js="filterForm"]');
          filter.addEventListener('change', function(e) {
            filterForm.submit();
          });
        {% endif %}

        snapcraft.public.newsletter();
      });
    });
  </script>
{% endblock %}
